<template>
  <div class="site">
    <app-sidenav v-toggle="left"></app-sidenav>
    <main>
      <keep-alive>
        <component v-bind:is="view">
          <app-navbar @changeLevel="handleLevel($event)" @toggleView="handleView" @toggleLeft="handleLeft" @toggleRight="handleRight" slot="navbar"></app-navbar>
        </component>
      </keep-alive>
    </main>
    <app-overview v-toggle="right"></app-overview>
  </div>
</template>

<script>
import AppSidenav from "./components/core/AppSidenav";
import AppViewOne from "./components/view/AppViewOne";
import AppViewTwo from "./components/view/AppViewTwo";
import AppNavbar from "./components/core/AppNavbar";
import AppOverview from "./components/core/AppOverview";
import { Toggle } from "./directives/layout";
import { mapGetters } from "vuex";
export default {
  directives: {
    toggle: Toggle
  },
  name: "App",
  components: {
    AppSidenav,
    AppNavbar,
    AppOverview,
    AppViewOne,
    AppViewTwo
  },
  methods: {
    // 为了使AppNavbar成为一个傻组件，应将所有逻辑放置于App中进行处理
    // 同时为了便于状态管理，将控制菜单以及树图的开关状态放置于Vuex中
    // AppNavbar中发射的所有事件，均由App.vue接收并处理
    // 接收到事件后，App.vue将会commit对应的mutation，改变根状态或子状态

    handleLeft() {
      // 改变layout状态下的左侧边栏的开关状态
      this.$store.commit("layout/toggleLeft");
    },
    handleRight() {
      // 改变layout状态下的右树图的开关状态
      this.$store.commit("layout/toggleRight");
    },
    handleView() {
      // 切换view1，view2
      this.$store.commit("layout/toggleView");
    },
    handleLevel($event) {
      // 改变定向层级，并确定柱状图模式为按同一层级定向进行展示
      this.$store.commit("viewOne/changeLevel", {
        level: $event,
        mode: "same-level"
      });
    }
  },
  computed: {
    // 将getters映射至组件实例data上的属性，
    // 访问this.left 相当于访问 this.$store.getters['layout/getShowLeft']
    // 在Vuex中，所有getters、actions、mutations都置于全局下
    // 因此可以通过this.getters, this.mutations, this.actions访问
    // 但如果在Vuex中使用了模块，并增加了命名空间，要想访问该模块中的getters, actions，mutations
    // 需增加命名空间前缀，如下
    ...mapGetters({
      left: "layout/getShowLeft",
      right: "layout/getShowRight",
      view: "layout/getView"
    })
  },
  mounted() {
    // 此处较为关键，所有数据均由App.vue派发对应的action去完成异步操作，当完成异步操作后
    // 再将data进行commit
    this.$store.dispatch("api/loadDirectionTemplateData");
    this.$store.dispatch("api/loadDirectionIndustriesData");
    // this.$store.dispatch("api/loadRadialStackbarData");
    // this.$store.dispatch("api/loadCompositionRightData");
  }
};
</script>

<style>
html,
body {
  margin: 0;
  height: 100%;
}

.site {
  position: relative;
  height: 100%;
  display: flex;
}
main {
  display: flex;
  flex: 1;
}

.tooltip {
  position: fixed;
  visibility: hidden;
  transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1),
    left 0.2s cubic-bezier(0.23, 1, 0.32, 1),
    top 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  background-color: rgba(0, 0, 0, 0.65);
  border-radius: 4px;
  color: #fff;
  padding: 10px 10px 6px;
}
</style>
